import imgSrc from "@/assets/s3.png";
import { Button } from "antd";

interface childType {
  list: Array<any>;
  myCount: number;
  title?: string;
  addFunc: () => void;
  getInfo?: (val) => void;
}
// childType: childType

function Children(props: childType) {
  const childInfo = {
    title: "这是子组件",
    desc: "测试子组件接受props参数",
    imgSrc: imgSrc,
  };

  const handleGetInfo = () => {
    props.getInfo(childInfo);
  };

  return (
    <>
      <div className="w-full h-full flex flex-col items-center justify-center">
        <Button type="primary" onClick={handleGetInfo} >调用父组件方法传递值实现通信</Button>
        <h1>{props.title || childInfo.title}</h1>
        <p>{childInfo.desc}</p>
        <img src={childInfo.imgSrc} className="authro" />
        <div>{props.myCount}</div>
        <Button
          type="primary"
          onClick={() => {
            props.addFunc();
          }}
          style={{ cursor: "pointer" }}
        >
          列表添加
        </Button>
        {props.list.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    </>
  );
}

export default Children;
